<template>
  <div>
  <div class="ellipsis">
    <div>2.main
      阿斯达阿斯达是否士大夫撒撒打算
      阿斯达阿斯达是否士大夫撒撒打算
      阿斯达阿斯达是否士大夫撒撒打算
    </div>
  </div>
  </div>
</template>

<style>
.ellipsis {
  width: 200px;
  overflow: hidden;
  height: 50px;
    line-height: 25px;
    margin: 20px;
    /* border: 5px solid #AAA; */
   }
 
.ellipsis:before {
    content:"";
    float: left;
    width: 5px; height: 50px; }
 
.ellipsis > *:first-child {
    float: right;
    width: 100%;
    margin-left: -5px; }        
 
.ellipsis:after {
    content: "\02026";  
 
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
 
    float: right; position: relative;
    top: -25px; left: 100%;
    width: 3em; margin-left: -3em;
    padding-right: 5px;
    
    text-align: right;
 
  
        background-size: 100% 100%;
  /* 512x1 image, gradient for IE9. Transparent at 0% -> white at 50% -> white at 100%.*/
background-image:url();
  
    background: -webkit-gradient(linear, left top, right top,
        from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);          
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}
</style>
